<template>
 <div>
  <el-button type="primary" style="margin-top:30px;margin-left:30px;" @click="openDialog">新增图片</el-button>
   <el-table
      ref="multipleTable"
      :data="testList"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px;margin-bottom:100px;margin-left: 30px;"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="图片详情" width="150">
        <template slot-scope="scope"
          ><img :src="scope.row.pictureAdress" style="width: 70px; height: 70px"
        /></template>
      </el-table-column>
      <el-table-column label="上传作者" width="130">
        <template slot-scope="scope">
          {{ scope.row.avator }}
        </template>
      </el-table-column>
      <el-table-column label="图片点缀" show-overflow-tooltip width="230">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="内容概览" width="500">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="UpdateImg(scope.row)"></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="ImgiDelete(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 对话框 -->
    <el-dialog :title="diffTitle" :visible.sync="dialogFormVisible">
      <el-form :model="formdata" :rules="rules" ref="userform" >
        <el-form-item
          label="上传人"
          :label-width="formLabelWidth"
          size="small"
          prop="avator"
        >
          <el-input v-model="formdata.avator" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主题" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formdata.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
       
          label="图片文字点缀"
          :label-width="formLabelWidth"
          prop="content"
        >
          <el-input v-model="formdata.content" autocomplete="off" type="text"></el-input>
        </el-form-item>
        <el-form-item label="具体文章" :label-width="formLabelWidth" prop="path">
          <el-select
            v-model="formdata.path"
            placeholder="请选择文章分类"
          >
            <el-option :label="item.title" :value="item.id" v-for="item in ImgTitleId" :key="item.id"></el-option>
            
          </el-select>
        </el-form-item>
        
        <!-- <el-form-item label="创建时间" :label-width="formLabelWidth" prop="reateTime">
          <el-date-picker
            v-model="formdata.reateTime"
            type="date"
            format="yyyy 年 MM月 dd日"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item> -->
         <el-form-item prop="avatar">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="EditImg"
            style="margin-top: 10px;"
            >选择图片</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addpic">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 头像对话框 -->
    <el-dialog title="选择标签图片" :visible.sync="isShow" class="second-dig">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="Fake Action"
        :on-change="handleChange"
        :file-list="fileList"
        :auto-upload="false"
        :http-request="handleHttpRequest"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >确定</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件,且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
 </div>
  
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'IndexMange',
  data() {
    return {
      testList:[],
      loading:true,
      dialogFormVisible:false,//对话框
      formdata: {
        avator: "", //	上传人
        content: "", //	图片上的 文字点缀
        name: "", //主题
        path: "", //主题对应的超链接,传随机数
        id:null,
        pictureAdress: "", //	图片
        // reateTime:'', //创建时间
      },
      flieData:null,
      fileList: [],
      isShow:false,
      formLabelWidth:'120px',
      titleShow:false,
      rules: {
       path:[
          { required: true, message: "请选择对应文章", trigger: "change" },
        ],
        avator: [
          { required: true, message: "请输入上传人", trigger: "change" },
        ],
        content: [
          { required: true, message: "请输入文字点缀", trigger: "", type: "" },
        ],
        
        name: [
          { required: true, message: "请输入主题", trigger: "change" },
        ],
        // reateTime: [{ required: true, message: "请选择创建时间", trigger: "change" }],
        
      },
    }
  },
  mounted() {
    this.getAllImgIdInfo()
    this.GetAllImage()
  },
  computed:{
     diffTitle(){
        if(this.titleShow == false){
          return '修改图片'
        }else{
          return '新增图片'
        }
     },
     ...mapGetters(['ImgTitleId'])
  },
  methods: {
    //拿到所有图片即id
    async getAllImgIdInfo(){
        let res = await this.$store.dispatch('titleOrPicture/getAllPicId')
        // console.log(res)
    },
    //打开对话框
    openDialog(){
      //打开对话框
      this.dialogFormVisible = true;
      this.titleShow = true
    },
    //得到所有图片
   async GetAllImage(){
       let res = await this.$store.dispatch('titleOrPicture/GetAllPic')
       if(res == 'ok'){
        this.loading = false
        this.testList = this.$store.state.titleOrPicture.AllImageInfo
       }
    },
      //打开头像选择器
    EditImg() {
      this.isShow = true;
    },
    // 以下都为上传头像方法
    handleChange(file) {
      this.flieData = file;
    },
    async handleHttpRequest() {
      let formData = new FormData();
      formData.append("file", this.flieData.raw);
      let res = await this.$store.dispatch("user/LinUpdataFile", formData);
      // console.log(this.formdata)
      // console.log('22222',res)
      if(res != ''){
        this.formdata.pictureAdress = res;
      }
      
      that.$message({
        message: "已选择图片",
        type: "success",
        showClose: true,
      });
    },
    submitUpload() {
      this.$refs.upload.submit();
      this.isShow = false;
    },
    //新增图片按钮
   async addpic(){
      this.loading = true
      if(this.formdata.pictureAdress == ''){
         this.$message({
            type:'error',
            message:'请先选择图片资源'
          })
          return;
      }
      if(this.titleShow == true){
        if(this.Validate() != false){
         let res = await this.$store.dispatch('titleOrPicture/AddOnePic',this.formdata)
         if(res == 'ok'){
          this.GetAllImage()
          this.dialogFormVisible = false
          this.loading = false
          this.$message({
            type:'success',
            message:'图片新增成功'
          })
         }
        }
         
      }else{
        //修改
        if(this.Validate() != false){
        let res = await this.$store.dispatch('titleOrPicture/UpdateOnePic',this.formdata)
        if(res == 'ok'){
          this.GetAllImage()
          this.dialogFormVisible = false
          this.loading = false
          this.$message({
            type:'success',
            message:'图片修改成功'
          })
         }
        }
        
      }
       
    },
    //修改图片
   async UpdateImg(data){
      this.titleShow = false
      this.dialogFormVisible = true
      const newdata = this.formdata
      this.formdata = {...newdata,...data}
       console.log(this.formdata)
    },
    //表单验证
    Validate(){
        this.$refs.userform.validate(valid=>{
          // console.log('11')
        if(!valid){
          return false
        }
        
    })
  },
  //删除图片
  async ImgiDelete(id){
    this.$confirm("此操作将删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async ()=>{
        let res = await this.$store.dispatch('titleOrPicture/delOnePic',id)
        this.GetAllImage()
        if(res == 'ok'){
          this.$message({
            type:'success',
            message:'图片删除成功'
          })
        }
      })
    
  }
  }
}
</script>

<style>

</style>
